<template>
    <div class="order-page">
        <back :back="false" title="我的订单"></back>
        <div class="order-content">
            <div class="order-tab">
                <div class="tab-item" :class="{active:activeindex == 1}" @click="activeindex = 1"><span>我的发布</span></div>
                <div class="tab-item" :class="{active:activeindex == 2}" @click="activeindex = 2"><span>我的接单</span></div>
            </div>
            <div class="order-list">
                <nodata v-if="OrderList.length < 1"></nodata>
                <div v-else class="item" v-for="(item,index) in OrderList" :key="index" ref="scrollbox">
                    <span v-if="item.order_status == 'new' || item.order_status == 'accept'" class="modify" @click="modify(item)">修改</span>
                    <div class="money"><span class="label">{{item.order_type == '1' ? '出售' : '我要'}}:</span>{{toThousands(item.money_num)}}<small>{{item.money_type}}</small></div>
                    <div class="times"><span class="label">发布时间:</span>{{item.create_time}}</div>
					<div class="times"><span class="label">交易时间:</span>{{item.trans_pre_time || '不限'}}</div>
                    <div class="user" v-if="item.type_for_me == 'push' && item.accept_uid > 0">
                        <p><span class="label">接单者:</span><span class="name" @click="$router.push(`/userinfo?uid=${item.accept_uid}`)">{{item.accept_name}}</span></p>
                    </div>
                    <div class="user" v-if="item.type_for_me == 'accept'">
                        <p><span class="label">发布者:</span><span class="name" @click="$router.push(`/userinfo?uid=${item.push_uid}`)">{{item.push_name}}</span></p>
                        
                    </div>
                    <div v-if="item.order_status != 'new'">
                        <p class="call"><span class="label">{{item.type_for_me == 'accept' ? '我的电话' : '对方电话'}}:</span><span class="cont">{{item.accept_phone || '暂无'}}</span></p>
                    </div>
                    <div>
                        <p class="call"><span class="label">{{item.type_for_me == 'push' ? '我的电话' : '对方电话'}}:</span><span class="cont">{{item.push_phone || '暂无'}}</span></p>
                    </div>
                    <div class="status">
                        <span class="label">订单状态:</span>
                        <span :style="{'color':setcolor(item)}">{{item.order_status_name}}</span>
                    </div>
                    <div class="address"><span class="label">发布地址:</span><span class="cont">{{pos_position(item) || '保密'}}</span></div>
                    <div class="carpic" v-if="item.order_status == 'new' || item.order_status == 'accept'">
                        <span class="label">手持证件:</span>
                        <div class="edit-imglist">
                            <div class="edit-add" :style="{'border-color':item.type_for_me == 'push' ? '#008ce0' : ''}">
                                <input type="file" v-if="item.type_for_me == 'push'" name="file" class="file" @change="addImg(1,item,index)" :id="`inputer_a${index}`"  accept="image/*">
                                <div class="imgbg" @click="showimg(item.push_image)">
                                    <img v-if="item.push_image"  :src="item.push_image" alt="">
                                    <p v-else>{{item.type_for_me == 'push' ? '上传证件' : '发布者证件'}}</p>
                                </div>
                            </div>
                            <div class="edit-add" :style="{'border-color':item.type_for_me == 'accept' ? '#008ce0' : ''}">
                                <input type="file" v-if="item.type_for_me == 'accept'" name="file" class="file" @change="addImg(2,item,index)" :id="`inputer_b${index}`"  accept="image/*">
                                <div class="imgbg" @click="showimg(item.accept_image)">
                                    <img v-if="item.accept_image" :src="item.accept_image" alt="">
                                    <p v-else>{{item.type_for_me == 'accept' ? '上传证件' : '接单者证件'}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="control">
                        <button v-if="item.order_status == 'new' || item.order_status == 'accept'" type="button" @click="cancelMyOrder(item)">取消订单</button>
                        <button v-if="item.order_status == 'accept'" class="complete" type="button" @click="complete(item)">标记完成</button>
                    </div>
                </div>
                <more v-if="ordermore.length > 19" @click.native="morefn"></more>
            </div>
        </div>
        <div class="modify-tpl" v-if="modifymodal">
            <div class="modify-box">
                <div class="title">修改<span class="close iconfont icon-guanbi" @click="modifymodal = false"></span></div>
                <div class="modify-contrl">
                    <div class="modify-item">
                        <span>联系方式:</span>
                        <p><input type="text" v-model.trim="modify_phone" placeholder="请输入联系方式"></p>
                    </div>
                    <div class="modify-item" v-if="modifyData.type_for_me == 'push'">
                        <span>发布地址:</span>
                        <p><input type="text" v-model.trim="modify_address" placeholder="请输入地址"></p>
                    </div>
                    <div class="modify-item">
                        <button type="button" class="modify-submit" @click.self="modifySub">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</template>

<style lang="stylus">
.order-page{
    padding-top 50px
    height calc(100% - 50px) !important
    background #f4f4f4
    position relative
    .order-content{
        height 100%
        .order-tab{
            width 100%
            height 50px
            font-size 16px
            line-height 50px
            display flex
            background-image: linear-gradient(to bottom, #48b5e4, #3555db)
            text-align center
            color #cfcfcf
            .tab-item{
                flex 1
                &.active{
                    color #fff
                    background-image linear-gradient(to bottom, #46a6e2, #1359b6)
                }
                
            }
        }
    }
    .order-list{
        height calc(100% - 50px)
        overflow-y auto
        padding 10px
        .item{
            font-size 14px
            background #ffffff
            border-radius 5px
            padding 10px
            margin-bottom 10px
            position relative
            .modify{
                color #3668dd
                font-size 12px
                position absolute
                top 10px
                right 10px
                display block
                padding 0 10px
                height 30px
                line-height 30px
            }
            > div{
                width 100%
                line-height 25px
                color #666
                &.user{
                    .call{
                        display flex
                        align-items center
                        .cont{
                            flex 1
                            font-size 12px
                        }
                    }
                }
                &.address{
                    display flex
                    align-items center
                    .cont{
                        flex 1
                        font-size 12px
                    }
                }
                &.carpic{
                    display flex
                    margin-bottom 10px
                    .edit-imglist{
                        width calc(100% - 100px)
                        display flex
                        .edit-add{
                            width 40%
                            height 80px
                            background #fff
                            display flex
                            align-items center
                            justify-content center
                            font-size 20px
                            color #999
                            margin-right 10px
                            position relative
                            border  1px solid #eee
                            .file{
                                width 100%
                                height 100%
                                display block
                                opacity 0
                                position relative
                                z-index 1
                            }
                            .imgbg{
                                display block
                                width 100%
                                height 100%
                                position absolute
                                top 0
                                left 0
                                display flex
                                align-items flex-end
                                justify-content center
                                background url(../../assets/image/addimg.png) no-repeat center
                                background-size 30px
                                overflow hidden
                                img{
                                    width 100%
                                    height 100%
                                    display block
                                }
                                p{
                                    font-size 12px
                                }
                            }
                        }
                    }
                }
                small{
                    font-size 12px
                }
                .label{
                    color #333
                }
                .name{
                    color  #1800f7
                }
                button{
                    width 80px
                    height  25px
                    color #fff
                    background #9c9c9c
                    border 0
                    border-radius 3px
                    margin 0 auto
                    font-size 12px
                    outline none
                    &.complete{
                        background #3971e2
                        margin-left 10px
                    }
                }
            }
        }
    }
    .modify-tpl{
        width 100%
        height 100%
        position absolute
        top 0
        left 0
        background rgba(0,0,0,0.5)
        display flex
        align-items center
        justify-content center
        z-index 2
        .modify-box{
            width 300px
            background #fff
            border-radius 5px
            overflow hidden
            box-shadow 0 0 5px #2d2d2d
            .title{
                text-align center
                background linear-gradient(to bottom, #48b5e4, #3555db)
                height 50px
                line-height 50px
                font-size 18px
                color #fff
                position relative
                .close{
                    position absolute
                    top 0px
                    right 10px
                    width 40px
                    color #585858
                }
            }
            .modify-contrl{
                padding 10px
                .modify-item{
                    display flex
                    align-items center
                    height 50px
                    margin-bottom 20px
                    span{
                        min-width 70px
                        font-size 16px
                    }
                    p{
                        width 100%
                        font-size 14px
                        border 1px solid #ddd
                        padding 6px  10px
                        border-radius 5px
                        input {
                            height 30px
                            line-height 30px
                            width 100%
                        }
                    }
                    .modify-submit{
                        width 100px
                        height 40px
                        margin 0 auto
                        background linear-gradient(to bottom, #e49348, #db3535)
                        color #fff
                        border-radius 5px
                        font-size 16px
                    }
                    &:last-child{
                        margin-bottom 0
                    }
                }
            }
        }
    }
}
</style>

<script>
export default {
    data(){
        return {
            OrderList:[],
            page:0,
            ordermore:[],
            activeindex:1,
            myorderlist:[],
            modifymodal:false,
            modify_phone:'',
            modify_address:'',
            modifyData:''
        }
    },
    created(){
        this.myOrderList('push');
    },
    watch:{
        activeindex(val){
            this.page = 0
            this.OrderList = []
            this.ordermore = []
            if(val == 1){
                this.myOrderList('push');
            }else{
                this.myOrderList('accept');
            }
        }
    },
    methods:{
		toThousands(num) {
			var num = (num || 0).toString(), re = /\d{3}$/, result = '';
			while ( re.test(num) ) {
				result = RegExp.lastMatch + result;
				if (num !== RegExp.lastMatch) {
					result = ',' + result;
					num = RegExp.leftContext;
				} else {
					num = '';
					break;
				}
			}
			if (num) { result = num + result; }
			return result;
		},
        modify(data){
            this.modifyData = data;
            this.modifymodal = true;
        },
        modifySub(){
            if(!this.modify_phone && !this.modify_address){
                this.createToast('请确认你要更新的内容','warn')
                return ;
            }
            var myreg=/^[1][1-9][0-9]{9}$/;
            if(this.modify_phone && !myreg.test(this.modify_phone)){
                this.createToast('手机格式不正确','error')
                return ;
            }
            this.$http.post(`/Orders/updateOrderConnectInfo`,{
                orderId:this.modifyData.id,
                connectPhone:this.modify_phone,
                address:this.modify_address
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.createToast(res.msg,'correct')
                    this.modifyData.push_phone = this.modify_phone
                    this.modifyData.pos_address = this.modify_address
                    this.modifymodal = false;
                    this.modify_address = ''
                    this.modify_phone = ''
                }else{
                    this.createToast(res.msg,'error')
                }
            })
        },
        showimg(img){
            if(!img){
                return;
            }
            this.$createImagePreview({
                imgs: [img]
            }).show()
        },
        pos_position(item){
            let adress = ''
                if(item.pos_provice){
                    adress +=  `${item.pos_provice}`
                }
                if(item.pos_city){
                    adress +=  `${item.pos_city}`
                }
                if(item.pos_area){
                    adress +=  `${item.pos_area}`
                }
                if(item.pos_address){
                    adress +=  `${item.pos_address}`
                }
                return adress
        },
        addImg(type,data,index) {
            //这边写图片的上传
            if(type == 1){
                let doma = document.getElementById(`inputer_a${index}`)
                let img_a = doma.files[0];
                console.log(img_a)
                if(img_a){
                    if(img_a.size >1024*1024*5){
                        this.createToast('上传图片不能超过5M','warn')
                        return;
                    }
                    data.push_image = this.getObjectURL(img_a)
                    this.update(img_a,data)
                }
            }else{
                let domb = document.getElementById(`inputer_b${index}`)
                let img_b = domb.files[0];
                if(img_b){
                    if(img_b.size >1024*1024*5){
                        this.createToast('上传图片不能超过5M','warn')
                        return;
                    }
                    data.accept_image = this.getObjectURL(img_b)
                    this.update(img_b,data)
                }
            }
        },
        update(img,item){
            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            };
            let toast = this.$createToast({
                time: 0,
                txt: '上传图片中...'
            }).show()
            let formdata = new FormData(); //创建form对象
            formdata.append('orderId',item.id);
            formdata.append('image_held_card',img);
            this.$http.postup('/Orders/upOrderImage',formdata, config).then(res => {
                console.log(res);
                toast.hide();
                if(res.code == 200){
                    this.createToast(res.msg,'correct')
                }else{
                    this.createToast(res.msg,'error')
                }
            })
        },
        getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        },
        morefn(){
            if(this.activeindex == 1){
                this.myOrderList('push');
            }else{
                this.myOrderList('accept');
            }
            
        },
        cancelMyOrder(data){
            this.$http.get(`/Orders/cancelMyOrder`,{
                orderId:data.id
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    data.order_status_name = '已取消'
                    data.order_status = 'canceled'
                    this.createToast(res.msg,'correct')
                }else{
                    this.createToast(res.msg,'error')
                }
            })
        },
        complete(data){
            this.$http.get(`/Orders/completeOrder`,{
                orderId:data.id
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    data.order_status_name = '已完成'
                    data.order_status = 'complete'
                    this.createToast(res.msg,'correct')
                }else{
                    this.createToast(res.msg,'error')
                }
            })
        },
        setcolor(data){
            switch(data.order_status){
                case 'new' :
                    return '#f70000'
                break;
                case 'accept' :
                    return '#009ef7'
                break;
                case 'canceled' :
                    return '#989898'
                break;
                case 'complete' :
                    return '#00980a'
                break;
            }
        },
        myOrderList(type){
            let toast = this.$createToast({
                time: 0,
                txt: '加载中...'
            }).show()
            this.page ++ 
            this.$http.get(`/Orders/myOrderList`,{
                page:this.page,
                type:type
            }).then( res => {
                console.log(res)
                toast.hide()
                if(res.code == 200){
                    this.ordermore = res.data.Orders
                    let list = res.data.Orders
                    list.forEach( item => {
                        if(item.push_image){
                            item.push_image = `${window.location.origin}/App/Orders/getOrderImage?orderId=${item.id}&imageName=${item.push_image}`
                        }
                        if(item.accept_image){
                            item.push_image = `${window.location.origin}/App/Orders/getOrderImage?orderId=${item.id}&imageName=${item.accept_image}`
                        }
                    })
                    this.OrderList =this.OrderList.concat(list) 
                }
            })
        },
        createToast(txt,type){
            this.$createToast({
                txt: txt,
                time:2000,
                type:type
            }).show()
        }
    }
}
</script>
